<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冒泡与阻止冒泡</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        .case4-top{
            width: 200px;
            height: 200px;
            background: #5bc0de;
        }
        .case4-body{
            width: 100px;
            height: 100px;
            background: #419641;
        }
        .case4-foot{
            width: 50px;
            height: 50px;
            background: red;
        }
    </style>
</head>
<body>
<div class="case4-top" id="case4-top" v-on:click="topclick">
    <div class="case4-body" v-on:click="bodyclick($el)">
        <div class="case4-foot" v-on:click.stop="footclick($el)"></div>
    </div>
</div>
<script type="text/javascript">
    var case4Demo2=new Vue({
        el:"#case4-top",
        data:{

        },
        methods:{
        topclick:function () {
            console.log("top被点击了")
        },
        bodyclick:function (e) {
            console.log("body被点击了")
            console.log(e)
        },
        footclick:function (e) {
            console.log("foot被点击了")
            console.log(e)
        }
        }
    })
</script>
</body>
</html>